<template>
    <div class="login-container">
        
        <!-- 内容区域 -->
        <div class="login-main">
            <!-- 顶部logo区域 -->
            <LoginLogo />

            <!-- 卡片部分 -->
            <LoginCard 
                :role="loginData.role" 
                @update:role="newRole => loginData.role = newRole" 
            />


            <!-- 登录表单区域 -->
            <LoginForm @login="handleLogin" />

        </div>
        

        
    </div>
</template>

<script setup>
import LoginForm from '@/components/auth/LoginForm.vue';
import LoginCard from '@/components/auth/LoginCard.vue';
import LoginLogo from '@/components/auth/LoginLogo.vue';
import { reactive } from 'vue';
import { loginApi } from '@/api/Login.js';
import {ElMessage} from 'element-plus'
import { useRouter } from 'vue-router';
import { useUserStore } from '@/stores/user.js'


// 1、在父组件中定义所有需要共享的状态
const loginData = reactive({
    role: 'student', // 初始化角色
    username: '',
    password: ''
});

const userStore = useUserStore(); // 实例化

const router = useRouter()


// const loginData = reactive({
//     role: '',
//     username: '',
//     password: ''
// });
const reLoginData = reactive({
    userId:'',
    role: '',
    username: '',
    password: '',
    token: ''
});

// 2、定义处理登录事件的函数
// 该函数会接收来自LoginForm组件传递过来的数据
// 表单数据只接收表单数据
//登录逻辑
const handleLogin = async (fromData) => {
    console.log('登录表单数据:', fromData);
    console.log('选择的角色:', loginData.role);

    try {
        const res = await loginApi({
            ...fromData,
            role: loginData.role === 'admin' ? 0 : 1 // 转换为后端需要的数值
        });

        console.log('登录API响应:', res);

        if (res.code == 1) {
            // 登录成功
            console.log('登录成功，用户数据:', res.data);
            
            // 1. 保存用户数据到localStorage
            Object.assign(reLoginData, res.data);
            localStorage.setItem('loginUser', JSON.stringify(reLoginData));
            console.log('保存到localStorage:', JSON.stringify(reLoginData));
            
            // 2. 更新Pinia状态
            userStore.setUserInfo(res.data);
            
            // 3. 确认角色设置
            const roleStr = res.data.role === 0 ? 'admin' : 'student';
            console.log('设置用户角色:', roleStr, '(原始值:', res.data.role, ')');
            
            // 4. 显示成功消息
            ElMessage.success("登录成功");
            
            // 5. 根据角色跳转到对应页面
            const targetPath = roleStr === 'admin' ? '/admin/dashboard' : '/student/dashboard';
            console.log('准备跳转到:', targetPath);
            
            // 使用replace而不是push，避免用户通过后退按钮回到登录页
            await router.replace(targetPath);
            console.log('跳转完成');
            
        } else {
            // 登录失败
            console.error('登录失败，错误信息:', res.message || '未知错误');
            ElMessage.error(res.message || "登录失败");
        }
    } catch (error) {
        console.error('登录请求异常:', error);
        ElMessage.error("网络错误，请稍后重试");
    }
}


</script>

<style scoped>

* {
    background-color: var(--bg-color-common);
}

/*
整个登录界面的样式
*/
.login-container {
    display: flex; /* 弹性布局 */
    align-items: center; /* x轴居中 */
    width: 100vw; /* 宽度占满视口宽度 */
    height:100vh; /* 高度占满视口高度 */
    padding-top: 24px;
    padding-bottom: 24px;
    flex-direction: column; /* 子元素垂直布局 */
    
}

.login-main {
    width: 745.6px;
    height: 676px;
    display: flex;
    align-items: center;
    flex-direction: column; /* 子元素垂直布局 */

}

.login-card {
    width: auto;
    height: auto;
}




</style>